<template>
  <div class="md-category-page">
    <div class="md-cate-box">
      <div class="md-cate-panel">
        <div class="class-search">
          <img src="../assets/img/course-title2.png" alt="">
          <div class="search-box">
            <el-input placeholder="搜索感兴趣的课程内容" v-model="params.searchValue" clearable @clear="getVideoListByCategoryId(1)" class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="getVideoListByCategoryId(1)"></el-button>
            </el-input>
          </div>
        </div>
        <div class="type-box">
          <div class="type-list">
            <b>方向：</b>
            <span :class="['type-item', +pIndex === item.rid ? 'type-item-active' : '']" v-for="(item, index) in categoryAryList" :key="index" @click="handleCategory(item)">{{item.name}}</span>
          </div>
          <div class="type-list">
            <b>分类：</b>
            <span :class="['type-item', +cIndex === c.rid ? 'type-item-active' : '']" v-for="(c, i) in categoryItemInfo.categoryList" :key="i" @click="handleCategoryItem(c)">{{c.name}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="md-class-con">
      <div class="md-class-container">
        <ul class="md-class-list" v-if="videos.length">
          <li v-for="(item, index) in videos" :key="index">
            <MdItemClassComponent :classInfo="item" />
          </li>
        </ul>
        <p v-else class="no-data">暂无数据</p>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination @current-change="handleCurrentChange" :current-page="+params.pageNum" :page-size="params.pageSize" layout="total, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCategoryList, getVideoListByCategoryId } from '@/axios/course'
import MdItemClassComponent from "../components/class/mdItem/index.vue";
export default {
  name: 'MdPagesCategoryComponent',
  components: {
    MdItemClassComponent
  },
  data () {
    return {
      params: {
        categoryId: '',
        searchValue: '',
        pageNum: 1,
        pageSize: 20
      },
      categoryAryList: [],
      categoryItemInfo: {},
      pIndex: null,
      cIndex: -1,
      videos: [],
      total: 0
    }
  },
  created () {
    if (sessionStorage.getItem('deptId')) {
      console.log(sessionStorage.getItem('deptId'), '---deptId')
      this.params.deptId = sessionStorage.getItem('deptId')
    }

    this.getCategoryList(1)
  },
  methods: {
    async getCategoryList () {
      const res = await getCategoryList(1)
      if (res.code === 200) {
        this.categoryAryList = res.data
        this.categoryAryList.forEach(item => {
          item.categoryList.unshift({
            rid: -1,
            name: '不限'
          })
        })
        // this.total = res.total
        this.pIndex = this.$route.query.pId ? this.$route.query.pId : this.categoryAryList[0].rid
        // 存在父级id就找到对应的子级，然后高亮子级
        if (this.$route.query.pId) {
          const cur = this.categoryAryList.filter(item => {
            return item.rid === +this.$route.query.pId
          })
          this.categoryItemInfo = cur[0]
          this.params.categoryId = this.$route.query.cId
        } else {
          this.categoryItemInfo = this.categoryAryList[0]
          this.params.categoryId = this.categoryItemInfo.rid
        }
        console.log('print')
        this.cIndex = this.$route.query.cId ? this.$route.query.cId : -1
        this.getVideoListByCategoryId(1)
      }
    },
    handleCategory (item) {
      this.categoryItemInfo = item
      this.pIndex = item.rid
      this.params.categoryId = item.rid
      this.cIndex = -1
      this.getVideoListByCategoryId(1)
    },
    // 根据分类id获取课程详情
    async getVideoListByCategoryId (pNo) {
      this.params.pageNum = pNo
      const res = await getVideoListByCategoryId(this.params)
      if (res.code === 200) {
        this.videos = res.rows
        this.total = res.total || 0
      }
    },
    handleCategoryItem (item) {
      this.cIndex = item.rid
      if (this.cIndex === -1) {
        this.params.categoryId = this.categoryItemInfo.rid
      } else {
        this.params.categoryId = item.rid
      }
      this.getVideoListByCategoryId(1)
    },
    handleCurrentChange (val) {
      this.params.pageNum = val
      this.getVideoListByCategoryId(val)
    }
  }
}
</script>
<style lang="less" scoped>
.md-category-page {
  width: 100%;
  .md-cate-box {
    width: 100%;
    background: #f5f7fa;
    .md-cate-panel {
      width: 1152px;
      margin: 0 auto;
      .class-search {
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
          height: 46px;
        }
        .search-box {
          width: 300px;
          /deep/ .el-input-group__append {
            padding: 0 10px;
            background: #545c63;
            border: 1px solid #545c63;
            i {
              color: #fff;
              font-size: 18px;
              font-weight: bold;
            }
          }
          /deep/ .el-input__inner:focus {
            border-color: #545c63;
            outline: 0;
          }
        }
      }
      .type-box {
        .type-list {
          padding: 10px;
          margin-bottom: 25px;
          b {
            font-size: 14px;
          }
          .type-item {
            color: #1c1f21;
            font-size: 14px;
            line-height: 16px;
            padding: 8px;
            border-radius: 6px;
            margin: 0 12px 12px 0;
            cursor: pointer;
          }
          .type-item-active {
            background: rgba(233, 142, 70, 0.1);
            color: #e98e46;
          }
        }
      }
    }
  }
  .md-class-con {
    width: 100%;
    background: #fff;
    .md-class-container {
      width: 1152px;
      margin: 0 auto;
      padding: 40px 0;
      .md-class-list {
        display: flex;
        flex-wrap: wrap;
        li {
          &:nth-child(4n) {
            .md-item-class-component {
              margin-right: 0;
            }
          }
        }
      }
      .pagination {
        margin-top: 20px;
        display: flex;
        justify-content: center;
      }
    }
  }
}
.no-data {
  color: #999;
  font-size: 12px;
  padding: 30px 0;
  text-align: center;
}
/deep/ .el-pager li.active {
  color: @md-primary-color;
}
/deep/ .el-pager li:hover {
  color: @md-primary-color;
}
/deep/ .el-input__inner:focus {
  border-color: @md-primary-color !important;
}
/deep/ .el-pagination button:hover {
  color: @md-primary-color;
}
</style>
